<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>ConfigProvider 全局配置</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">i18n 配置</el-divider><!-- =============================================================== -->
	<p class="desc">通过 Config Provider 来配置多语言，让你的应用可以随时切换语言。</p>
	<p class="desc">使用两个属性来提供 i18n 相关配置</p>
	<div>
		<el-button m="b-2" @click="toggle">切换语言</el-button>
		<br />
		<el-config-provider :locale="locale2">
			<el-color-picker :model-value="''" style="vertical-align: middle" />
		</el-config-provider>
	</div>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!',
			locale1: {
				name: 'zh-cn',
				el: {
					colorpicker: {
						confirm: '确定',
						clear: '清空',
					},
				},
			},
			locale2: {
				name: 'en',
				el: {
					colorpicker: {
						confirm: 'Confirm',
						clear: 'Clear',
					},
				},
			},
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		toggle(){
			const temp = this.locale1
			this.locale1 = this.locale2
			this.locale2 = temp
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>